<style>
	
</style>
<template>
<div>
   <header class="admin-container-header clearfix">
        <div class="header-group">
            <h4> 蜘蛛抓取分析</h4>
        </div>
    </header>
    <main class="admin-container-body" style="height: calc(100% - 50px)">
    <div class="panel-box">
        <div class="panel-box-body">
            <section class="diy-table-list">
                <div class="diy-table-item diy-table-item-header">
                    <ul class="list-unstyled row">
                        <li class="col-md-2">
                            <span>时间</span>
                        </li>
                        <li class="col-md-2">
                            <span>百度</span>
                        </li>
                        <li class="col-md-2">
                            <span>搜狗</span>
                        </li>
                        <li class="col-md-2">
                            <span>神马</span>
                        </li>
                        <li class="col-md-2">
                            <span>360</span>
                        </li>
                        <li class="col-md-2">
                            <span>谷歌</span>
                        </li>
                    </ul>
                </div>
                <div v-if='itemList.length' class="diy-table-body">
                    <div class="diy-table-item" v-for='item in itemList' >
                         <ul class="list-unstyled row">
                            <li class="col-md-2">
                                <span>{{item.date}}</span>
                            </li>
                            <li class="col-md-2">
                                <span>{{item.baidu}}</span>
                            </li>
                            <li class="col-md-2 over-h-e">
                                <span>{{item.sogou}}</span>
                            </li>
                            <li class="col-md-2 over-h-e">
                                <span>{{item.sm}}</span>
                            </li>
                            <li class="col-md-2 over-h-e">
                                <span>{{item['360']}}</span>
                            </li>
                            <li class="col-md-2 over-h-e">
                                <span>{{item.google}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="no-block" v-else>
                    <Icon type="ios-filing-outline"></Icon>
                    <p>暂无数据</p>
                </div>
            </section>
            
            <!--分页-->
            <div class="text-right clearfix mt-3">
                <Page :total="pagination.total"  @on-page-size-change='itemPaginationSelect' :page-size-opts='[10,100,500,1000,5000]' show-total show-sizer placement='top' @on-change='itemPaginationClick'></Page>
            </div>
        </div>
    </main>
      
</div>
</template>

<script>
    export default {
     data () {
       return {
            itemName: '{$itemName}',
            itemListSelectStatus: false,
            itemList: [],
            loading: false,
            
            pagination: {
                currentPage: 1,
                limit: 10,
                total: this.total,
            },
       }
     },
     watch: {
            
        },
        mounted() {
            this.getItemList();
        },
        methods: {
            getItemList:function() {
                this.$ssy.ajax('{$domain}/spiderOneMore/ApiAdminSpiderOneMore/itemList',{
                    page: this.pagination.currentPage,
                    limit: this.pagination.limit,
                }).then(res =>  {
                    if (res.code == 1) {
                        var itemList = res.data.spidersList;
                        if (itemList) {
                            for (var i = 0; i < itemList.length; i++) {
                                itemList[i].itemListSelectStatus = false; 
                            }
                            this.itemList = itemList;
                        }
                        this.pagination.total = res.data.total;
                    }
                });
            },
            //选择全部
            itemListSelectChange() {
                var itemList = this.itemList;
                for (var i = 0; i < itemList.length; i++) {
                    if (this.itemListSelectStatus) {
                        itemList[i].itemListSelectStatus = true;
                    } else {
                        itemList[i].itemListSelectStatus = false;
                    }
                }
                this.itemList = itemList;
            },
            itemPaginationSelect(val) {
                this.pagination.limit = val;
                this.getItemList();
            },
            itemPaginationClick(val) {
                this.pagination.currentPage = val;
                this.getItemList();
            },
        }
    }
</script>
